<template>
	<view>
		<view class="ptb10 plr12 align-center justify-end tc posFixed zIndex999 w100" style="background: #fff;">
			<view class="bdlight light btn radius22 ptb5 plr12" @click="navTo('/pages/address/newAddress')">
				{{$t('shop').地址管理}}
			</view>
			<view class="bglight white btn radius22 ml12 ptb5 plr12" @click="navTo('/pages/mine/order-list')">
				{{$t('shop').兑换记录}}
			</view>
		</view>
		<view v-if="status">
			<mescroll-body top='100' @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
				:down="downOption">
				<view class="plr12 flex-wrap flex-row justify-between">
					<view class="radius8 overhide bgWhite items mt10" v-for="(item,index) in goodsLists" :key="index"
						@click="navTo(`/pages/mine/good-detail?id=${item.id}`)">
						<image :src="item.cover" mode="aspectFill" style="width: 345upx;height: 345upx;"></image>
						<view class="plr10 ptb10">
							<view class="clamp2" style="max-height: 76rpx;">{{item.good_name}}</view>
							<view class="align-center justify-between mt5" @click.stop="ggShow(item)">
								<text
									class="red ft15 bold">{{userInfo.area==2?'$':''}}{{parseFloat(item.min_price)}}</text>
								<u-icon name="plus-circle-fill" color="#F44A42" size="20"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>

		<view class="ts-box" v-else>
			<image class="ts-img" src="../../static/images/mine/icon_wushuju.png" mode=""></image>
			<view class="ts-text">{{$t('shop').加油站兑换入口已关闭请次月再来兑换哦}}</view>
			<view class="ts-time">{{$t('shop').加油站每月最后一天17点24点自动关闭请提前安排兑换}}</view>
		</view>
		<!-- 返回首页 -->
		<view @click="goindex()" class="bgWhite radius50 justify-center align-center posFixed zIndex999"
			style="width: 80rpx;height: 80rpx;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(187,187,187,0.3); right: 24rpx;bottom: 59rpx;">
			<view class="ft10 gray9" style="width: 40rpx;"><text>{{$t('shop').返回首页}}</text></view>
		</view>
		<!-- 规格 -->
		<u-popup :show="ggpop" :closeable="true" @close="ggHide(0)" :safeAreaInsetBottom="false">
			<view class="ggpop-box">
				<view class="ggpop-news align-center">
					<image class="ggpop-img" :src="selgoodsInfo.image || goodsInfo.cover" mode="aspectFill"
						@click="ggImgBtn('../../static/images/ls/1.jpg')"></image>
					<view v-if="goodsInfo.sku">
						<view class="ggpop-pric">
							{{userInfo.area==2?'$':''}}{{selgoodsInfo.price/1 || goodsInfo.sku[0].price/1}}
						</view>
						<!-- | $t('shop').套组 -->
						<view v-if="selgoodsInfo.sku" class="ggpop-gg gray3">{{$t('shop').已选}}“{{selgoodsInfo.sku}}”
						</view>
					</view>
				</view>

				<view class="ggpop-con" v-for="(item,index) in goodsInfo.attr" :key="index">
					<view class="ggpop-c-title gray3">{{item.name}}</view>
					<view class="align-center flex-wrap">
						<view class="ggpop-c-item gray3 clamp" v-for="(m,n) in item.data" :key="n"
							:class="[item.selgoods==n&&m.stock!=0?'ggpop-c-ac':'',item.selgoods!=n&&m.stock==0?'bgE':'']"
							@click="ggBtn(index,n)">
							{{m.value}}
						</view>
					</view>
				</view>
				<view class="align-center justify-between" style="margin: 25rpx 0 160rpx;">
					<view class="gray3" style="font-size: 28rpx;font-weight: bold;">{{$t('shop').购买数量}}</view>
					<!-- 					<view>
						<u-number-box v-model="product_num" :disabledInput="true" :integer="true"
							@change="valChange"></u-number-box>
					</view> -->
					<view class="align-center bd97 radius2 ">
						<view @click.stop="reduce()" class="tc ptb3" style="width: 60rpx;"><text>-</text></view>
						<view class="bordlf tc ptb3">
							<input @blur='burr' @input="changeValue" v-model="product_num" type="number"
								style="width: 100rpx;" placeholder-class="placeholderStyle" />
						</view>
						<view @click.stop="add()" class="tc ptb3" style="width: 60rpx;"><text>+</text></view>
					</view>
				</view>

				<view class="ggpop-btn" @click="ggHide(1)">{{$t('shop').立即兑换}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true
				},
				upOption: {
					auto: true,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: this.$t('common').已经到底了,
					empty: {
						tip: this.$t('common').暂无数据 // 空提示
					}
				},
				goodsLists: [],
				curreny: uni.getStorageSync('currency'), //币种
				status: true, //加油站的开启时间段
				// 弹窗
				ggpop: false,
				selgoodsInfo: {}, //选中商品的信息
				goodsInfo: {}, //商品信息
				product_num: 1, //商品数量

			}
		},
		onLoad() {
			this.$store.dispatch('getuserInfo')
			uni.setNavigationBarTitle({
				title: this.$t('mine').加油站
			})
		},
		onShow() {
			this.mescroll && this.mescroll.resetUpScroll()
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		methods: {
			// 下拉刷新
			upCallback(page) {
				if (page.num == 1) this.goodsLists = []; //如果是第一页需手动制空列表
				this.$api.getpruductlist({
					page: page.num,
					limit: page.size
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					let curPageLen = curPageData?.length; //当前页的数据长度
					let totalPage = res.data.total; //总页数
					let hasNext = (20 == curPageLen ? false : true) //根据页数判断是否有下一页
					this.goodsLists = this.goodsLists.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
					this.status = res.data.status
				})
			},
			// 返回首页
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 规格弹窗打开
			ggShow(value) {
				let val = JSON.parse(JSON.stringify(value))
				console.log(val)
				this.selgoodsInfo = {}
				this.goodsInfo = {}
				this.ggpop = true;
				let moduleGroup = []
				// 			if (!val.isclick) {

				// 			} else {
				// 				this.goodsInfo = val
				// 			}
				val.attr.forEach((item) => {
					let obj = {
						name: item.k,
						data: []
					}
					item.v.forEach((itm) => {
						obj.data.push({
							'value': itm
						})
					})
					moduleGroup.push(obj)
				})
				this.goodsInfo = Object.assign(val)
				this.goodsInfo.attr = [...moduleGroup]

				// moduleGroup.forEach((item, index) => {
				// 	item.data.forEach((m,n)=>{
				// 		this.$set(item, 'selgoods', n)
				// 	})
				// })

				// this.$set(this.goodsInfo, 'isclick', true)
				// this.goodsInfo.attr.forEach((item, index) => {

				// })
				let sku = this.goodsInfo.sku
				console.log(sku)
				for (let i = 0; i < sku.length; i++) {
					if (sku[i].stock > 0) {
						console.log(sku[i].sku)
						this.selgoodsInfo = sku[i]
						let selarr = sku[i].sku.split(',')
						console.log(selarr)
						selarr.forEach((item, index) => {
							moduleGroup.forEach((m, n) => {
								m.data.forEach((x, y) => {
									if (item == x.value) {
										this.$set(m, 'selgoods', y)
									}
								})
							})
						})
						break;
					}
				}
				this.selallSpecs()
			},

			// 规格选择
			ggBtn(index, n) {
				// if (this.goodsInfo.attr[index].selgoods == n) {
				// 	this.$set(this.goodsInfo.attr[index], 'selgoods', undefined)
				// } else {

				// }
				if (this.goodsInfo.attr[index].data[n].stock == 0) {
					return
				}
				this.$set(this.goodsInfo.attr[index], 'selgoods', n)
				// let selnum = this.goodsInfo.attr.filter((item, index) => {
				// 	return item.selgoods >= 0
				// })

				// console.log(selnum.length)
				// 选中n-1
				// if (selnum.length == this.goodsInfo.attr.length - 1) {
				// 	this.getspecs() //获取商品的库存
				// }
				// 全部选中
				// if (selnum.length == this.goodsInfo.attr.length) {
				// 	// console.log(this.goodsInfo.attr[index].data[n].stock)
				// 	// if (this.goodsInfo.attr[index].data[n].stock == 0) {
				// 	// 	this.$set(this.goodsInfo.attr[index], 'selgoods', undefined)
				// 	// 	this.getspecs() //获取商品的库存
				// 	// 	this.$utils.msg('规格库存不足')
				// 	// } else {

				// 	// }

				// 	// 筛选判断状态

				// }
				this.selallSpecs(index, n) //获取选择的商品规格
			},
			// 选择全部的商品规格
			selallSpecs(selindex, seln) {
				let allskuArr = []
				// console.log(this.goodsInfo.attr)
				this.goodsInfo.attr.forEach((item, index) => {
					item.data.forEach((m, n) => {
						if (item.selgoods == n) {
							allskuArr.push(m.value)
						}
					})
				})
				console.log(allskuArr)
				this.othersku(allskuArr)
				this.goodsInfo.sku.forEach((item, index) => {
					if (allskuArr.join(',') == item.sku) {
						if (item.stock > 0) {
							this.selgoodsInfo = item

							// this.$set(this.goodsInfo.attr[selindex], 'selgoods', seln)
						} else {
							this.selgoodsInfo = {}
							// console.log(item)

							// this.$set(this.goodsInfo.attr[selindex], 'selgoods', undefined)

							// // this.$set(this.goodsInfo.attr[selindex].data[seln], 'stock', item.stock)
							// // this.getspecs()
							// this.$utils.msg(this.$t('shop').商品库存不足)
							// this.selgoodsInfo = ''
						}

					}

				})
			},
			// 筛选判断其它库存状态
			othersku(allskuArr) {
				// let arr = allskuArr
				// console.log(allskuArr)
				this.goodsInfo.attr.forEach((item, index) => {
					var arr = allskuArr.slice(0)
					item.data.forEach((m, n) => {
						if (item.selgoods != n) {
							arr[index] = m.value
							// console.log(arr)

							this.goodsInfo.sku.forEach((x, y) => {
								if (arr.join(',') == x.sku) {
									this.$set(this.goodsInfo.attr[index].data[n], 'stock', x.stock)
								}
							})
						}
					})
				})
				// console.log(this.goodsInfo.attr)
			},
			// 规格弹窗关闭
			ggHide(val) {

				if (val == 1) {
					console.log(!this.selgoodsInfo.id)
					if (!this.selgoodsInfo.id) {
						return this.$utils.msg(this.$t('shop').已售罄)

					}
					if (this.selgoodsInfo.stock < this.product_num) {
						return this.$utils.msg(this.$t('shop').已售罄)
					}
					this.ggpop = false;
					this.navTo(
						`/pages/mine/good-order?good_id=${this.goodsInfo.id}&sku_id=${this.selgoodsInfo.attr_sn}&product_num=${this.product_num}&sku=${this.selgoodsInfo.sku}`
					)
				} else {
					this.ggpop = false;
				}
			},
			// 商品数量加减
			valChange(e) {
				this.product_num = e.value;
			},
			// 商品加
			add() {
				if (this.selgoodsInfo.stock > this.product_num) {
					this.product_num++
				}
			},
			// 商品减
			reduce() {
				if (this.product_num > 1) {
					this.product_num--
				}
			},
			burr(value) {
				if (value.detail.value < 0 || value.detail.value == '') {
					this.product_num = 1
				}
			},
			// 手动输入
			changeValue(value) {
				console.log(value)
				// 			this.$nextTick(() => {
				// 				if(value.detail.value==''){
				// 					this.product_num=1
				// 				}else{

				// 				}

				// 			})
				this.$nextTick(() => {
					if (this.selgoodsInfo.stock > value.detail.value) {
						this.product_num = value.detail.value
					} else {
						this.product_num = this.selgoodsInfo.stock
					}
				})

			},
			// 规格图片预览
			ggImgBtn(val) {
				this.imgpop = true;
				this.imgUrl = val;
			},
		}
	}
</script>

<style lang="scss">
	.btn {
		// width: 172upx;
		// height: 60upx;
		// line-height: 60upx;
	}

	.items {
		width: 345upx;
	}

	.ts-box {
		padding: 228rpx 0;
		text-align: center;

		.ts-img {
			width: 520rpx;
			height: 380rpx;
		}

		.ts-text {
			color: #0D0A0B;
			font-size: 30rpx;
			font-weight: 400;
			margin-top: 32rpx;
		}

		.ts-time {
			color: #0D0A0B;
			font-size: 24rpx;
			font-weight: 400;
			margin-top: 16rpx;
		}
	}

	.ggpop-box {
		padding: 32rpx;

		.ggpop-news {
			.ggpop-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 32rpx;
			}

			.ggpop-pric {
				color: #F23C4B;
				font-size: 36rpx;
				font-weight: bold;
			}

			.ggpop-gg {
				font-size: 24rpx;
				margin-top: 24rpx;
			}
		}

		.ggpop-con {
			padding: 25rpx 0;

			.ggpop-c-title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.ggpop-c-item {
				max-width: 686rpx;
				font-size: 24rpx;
				padding: 12rpx 24rpx;
				border: 2rpx solid #ccc;
				border-radius: 4rpx;
				margin: 24rpx 24rpx 0 0;
			}

			.ggpop-c-ac {
				color: #F23C4B;
				border: 2rpx solid #F23C4B;
			}
		}

		.ggpop-btn {
			width: 686rpx;
			height: 70rpx;
			color: #ffffff;
			text-align: center;
			line-height: 70rpx;
			font-size: 32rpx;
			background: #F44A42;
			border-radius: 100rpx;
		}
	}

	.bordlf {
		border-left: 2rpx solid #979797;
		border-right: 2rpx solid #979797;
	}
</style>